<template>
    <div class="form">
        <page-info-title :title="$t('application.form.teamInfo')"></page-info-title>
        <div class="ipt1">
            <page-input :title="$t('application.form.teamName')" @message="(e) => { form.teamName = e }"
                :required="true" :placeholder="$t('application.form.enterTeamName')" :disabled="disabled"
                :history="oldParams.teamName || ''"></page-input>
            <page-input :title="$t('application.form.schoolName')" @message="(e) => { form.schoolName = e }"
                :required="true" :placeholder="$t('application.form.enterSchoolName')" :disabled="disabled"
                :history="oldParams.schoolName || ''"></page-input>
            <page-input :title="$t('application.form.conactEmail')" @message="(e) => { form.conactEmail = e }"
                :required="true" :placeholder="$t('application.form.enterConactEmail')" :disabled="disabled"
                :history="oldParams.conactEmail || ''"></page-input>
        </div>
        <div class="ipt1">
            <page-input :title="$t('application.form.mailingAddress')" @message="(e) => { form.mailingAddress = e }"
                :required="true" :placeholder="$t('application.form.enterMailingAddress')" :disabled="disabled"
                :history="oldParams.mailingAddress || ''"></page-input>
        </div>
        <div class="ipt2">
            <page-input-textarea @message="(e) => { form.schoolIntro = e }" :required="true"
                :title="$t('application.form.schoolIntro')" :placeholder="$t('application.form.enterSchoolIntro')"
                :max="200" height="2.13rem" :disabled="disabled"
                :history="oldParams.schoolIntro || ''"></page-input-textarea>
        </div>
        <div class="ipt3">
            <input-table :disabled="disabled" @message="(e) => { form.memberParams = e }"
                :history="oldParams.memberParams || []"></input-table>
        </div>
    </div>
</template>
<script>
import pageInfoTitle from './page-info-title.vue'
import pageInput from './page-input.vue';
import pageInputTextarea from './page-input-textarea.vue';
import inputTable from './input-table.vue';
import { reactive } from 'vue'
export default {
    components: {
        pageInfoTitle,
        pageInput,
        pageInputTextarea,
        inputTable
    },
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        oldParams: {
            type: [Array, Object],
            default: []
        }
    },

    setup() {
        const form = reactive({
            teamName: "",
            schoolName: "",
            schoolIntro: "",
            conactEmail: "",
            memberParams: []
        });
        return {
            form
        }
    },

    watch: {
        form: {
            deep: true,
            handler(newVal, oldVal) {
                this.$emit('message', newVal)
            },
            immediate: true
        }
    }
}
</script>


<style lang="less" scoped>
.form {
    padding: 0.64rem 1.49rem;
    background: rgba(253, 253, 254, 0.25);
    border: 0.05rem solid #FFFFFF;
    backdrop-filter: blur(10px);
}

.ipt1 {
    display: flex;
    align-items: center;
    margin-bottom: 0.64rem;
}

.ipt2 {
    margin-bottom: 0.64rem;
}
</style>